<!-- 自定义Timeline组件 -->
<script setup>
  import { formatCls } from './util.js'
  const props = defineProps({
    // 类型(card)
    type: { type: String, default: '' },
  })
  const emit = defineEmits(['click'])
  const preClass = formatCls(props, 've__timeline--', ['type'])
  // 事件
  const handleClick = (e) => {
    emit('click', e)
  }
</script>

<template>
  <ul class="ve__timeline" :class="[preClass]" @click="handleClick">
    <slot />
  </ul>
</template>

<style lang="scss" scoped>
  $color-primary: #409eff;
  $color-success: #31c48d;
  $color-warning: #e6a23c;
  $color-danger: #f56c6c;
  $color-info: #909399;
  $color-white: #fff;
  $color-black: #000;

  /*Hover/Active Color*/
  $primary-outline-color: #d9ecff;
  /*Font Color*/
  $color-text-primary: #303133;
  $color-text-regular: #606266;
  $color-text-secondary: #909399;
  $color-text-placeholder: #c0c4cc;
  /*Border Color*/
  $border-color-base: #dcdfe6;
  $border-color-light: #e4e7ed;
  $border-color-lighter: #ebeef5;
  $border-color-extra-light: #f2f6fc;
  /*Background*/
  $background-color-base: #f5f7fa;
  /*Box-shadow*/
  $box-shadow: 0 3px 9px rgba(0, 0, 0, 0.08), 0 3px 3px rgba(0, 0, 0, 0.04);
  $box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  $box-shadow-light: 0 4px 12px -8px rgba(0, 0, 0, 0.1), 0 6px 18px 0 rgba(0, 0, 0, 0.06), 0 8px 24px 16px rgba(0, 0, 0, 0.03);
  $box-shadow-lighter: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.04), 0 12px 48px 16px rgba(0, 0, 0, 0.03);
  $border-width-base: 1px;
  $border-style-base: solid;
  $border-color-hover: $color-text-placeholder;
  $border-base: $border-width-base $border-style-base $border-color-base;
  $border-radius-base: 4px;
  $border-radius-small: 2px;
  $border-radius-circle: 100%;
  $border-radius-zero: 0;
  $size-base: 14px;
  $font-size-extra-large: 18px;
  $font-size-large: 16px;
  $font-size-base: 14px;
  $font-size-small: 12px;
  $font-weight-primary: 500;
  $font-weight-secondary: 100;
  $font-line-height-primary: 24px;
  $font-line-height-secondary: 16px;
  $font-color-disabled-base: #bbb;
  $disabled-fill-base: $background-color-base;
  $disabled-color-base: $color-text-placeholder;
  $disabled-border-base: $border-color-light;
  $height-base: 32px;
  $large-height-base: 40px;
  $small-height-base: 24px;

  /* Timeline
	--------------------------------*/
  $timeline-font-size: $font-size-base;
  $timeline-node-color: $border-color-light;
  $timeline-node-size: $font-size-small;

  .ve__timeline {
    font-size: $timeline-font-size;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ve__timeline-item {
    padding-bottom: 20px;
    position: relative;
  }
  .ve__timeline-item:last-child {
    padding-bottom: 0;
  }
  .ve__timeline-item__line {
    border-left: 2px solid $timeline-node-color;
    height: 100%;
    position: absolute;
    left: calc(($timeline-node-size - 2px) / 2);
  }
  .ve__timeline-item:last-child .ve__timeline-item__line {
    display: none;
  }
  .ve__timeline-item__node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: $timeline-node-color;
    border-radius: 50%;
    height: $timeline-node-size;
    width: $timeline-node-size;
    position: absolute;
  }
  .ve__timeline-item__node [class*='ve-icon-'] {
    color: #fff;
    font-size: inherit;
  }
  .ve__timeline-item__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
  }
  .ve__timeline-item__body {
    padding-left: calc($timeline-node-size + 18px);
    position: relative;
    top: calc($timeline-node-size / 2 - 9px);
  }
  .ve__timeline-item__content {
    color: $color-text-primary;
    font-size: inherit;
    font-family: system-ui;
    word-break: break-all;
  }
  .ve__timeline-item__timestamp {
    color: $color-text-secondary;
    font-size: 12px;
    line-height: 1;
  }
  .ve__timeline-item__timestamp.is-top {
    margin-bottom: 7px;
    padding-top: 3px;
  }
  .ve__timeline-item__timestamp.is-bottom {
    margin-top: 7px;
  }

  /*type*/
  .ve__timeline-item--primary .ve__timeline-item__node {
    background-color: $color-primary;
  }
  .ve__timeline-item--primary .ve__timeline-item__dot {
    color: $color-primary;
  }
  .ve__timeline-item--success .ve__timeline-item__node {
    background-color: $color-success;
  }
  .ve__timeline-item--success .ve__timeline-item__dot {
    color: $color-success;
  }
  .ve__timeline-item--warning .ve__timeline-item__node {
    background-color: $color-warning;
  }
  .ve__timeline-item--warning .ve__timeline-item__dot {
    color: $color-warning;
  }
  .ve__timeline-item--danger .ve__timeline-item__node {
    background-color: $color-danger;
  }
  .ve__timeline-item--danger .ve__timeline-item__dot {
    color: $color-danger;
  }
  .ve__timeline-item--info .ve__timeline-item__node {
    background-color: $color-info;
  }
  .ve__timeline-item--info .ve__timeline-item__dot {
    color: $color-info;
  }

  /*卡片card*/
  .ve__timeline--card .ve__timeline-item__content {
    border-radius: 4px;
    box-shadow: 0 1px 4px $border-color-base;
    padding: 20px;
  }
</style>
